<template>
  <div class="one channel-item">
    <!--不要 class="editor-plus-form" -->
    <el-form
      :model="channelDetails"
      :rules="rules"
      ref="ruleForm11"
      label-width="100px"
      class="editor-plus-form"
      size="small"
    >
      <span class="share-row" v-hasPermi="['system:channel:edit']">
        <el-button
          type="primary"
          size="mini"
          @click="share()"
          v-if="!channelDetails.channelTid"
          >共享栏目内容模板</el-button
        >
        <el-button type="primary" size="mini" @click="noShare" v-else
          >取消共享模板</el-button
        >
        <el-button type="primary" size="mini" @click="handleSharedCloumn"
          >查看共享的栏目</el-button
        >
        <!-- tid{{channelDetails.tId}} {{share1From[0].label}} -->
        <span v-if="share1.length > 0">
          <!-- <div v-if="false"> -->
          <el-button type="primary" size="mini" @click="cacleShare()"
            >取消共享</el-button
          >
          共享栏目<font
            color="red"
            v-for="(item, index) in share1"
            :key="index"
          >
            《{{ item.label }}》</font
          >
        </span>
        <span v-if="share1From.length > 0">
          <!-- <div v-if="false"> -->
          共享栏目<font
            color="red"
            v-for="(item, index) in share1From"
            :key="index"
          >
            《{{ item.label }}》</font
          >
        </span>
      </span>
      <el-row>
        <el-col :span="12">
          <el-form-item label="栏目名称" prop="name">
            <el-input
              v-model="channelDetails.name"
              @blur="name2Blur"
              maxlength="20"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="栏目别名" prop="alias">
            <el-input v-model="channelDetails.alias" readonly></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row class="edit-row"> -->
      <el-row>
        <el-col :span="24" style="height: 100%">
          <el-form-item label="栏目模板" class="codeEditor">
            <EditorPlus
              ref="editorPlus"
              v-bind:template.sync="channelDetails.channelTemplate"
              :imgDetail="imgDetail"
              @getTemplete="getTemplete"
            ></EditorPlus>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import CodeEditor from "@/components/codeEditor";

import EditorPlus from "@/components/EditorPlus";
import pinyin from "js-pinyin";
export default {
  props: {
    channelDetails: Object,
    share1: {},
    share1From: {},
    tId: {},
    channelTid: {},

    type: Boolean,
  },
  data() {
    return {
      ruleForm: {},
      rules: {
        name: [{ required: true, message: "请输入栏目名称" }],
      },
      templeteCache: "",
    };
  },

  components: { CodeEditor, EditorPlus },

  computed: {
    imgDetail() {
      return {
        width: this.channelDetails.channelProp.imgWidth,
        height: this.channelDetails.channelProp.imgHeight,
      };
    },
  },

  mounted() {
    this.$nextTick(() => {
      this.$refs.editorPlus.radio1 = "view";
      // this.$emit("viewShareCloumn", "T");
    });
  },

  watch: {},

  methods: {
    share() {
      this.$emit("shareCloumn", "T");
    },
    handleSharedCloumn() {
      this.$emit("handleSharedCloumn", "T");
    },
    noShare() {
      // this.$emit("update:channelTid", 0);
      this.$emit("update:channelTid", 0);
    },
    //共享源取消共享   不要
    cacleShare() {
      this.$emit("update:tId", null);
      // this.$emit("cacleShare");
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //栏目名称失焦时    别名触发
    name2Blur() {
      if (this.type || !this.channelDetails.name) {
        return;
      }
      this.channelDetails.alias = pinyin
        .getFullChars(this.channelDetails.name)
        .toLocaleLowerCase();
    },
    getTemplete(template) {
      // this.$emit('updat')
      // this.$emit("getCode", { tab: "one", template: template });
    },
  },
};
</script>

<style scoped lang="scss">
@import "~@/assets/styles/el-form.scss";
.one {
  // padding: 0 100px;
  max-width: 1100px;
  margin: 0 auto;
}
// ::v-deep .codeEditor {
//   .el-form-item__content {
//     height: 500px;
//   }
// }
</style>
